<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--    <el-col :span="4" :xs="24">-->
            <!--      <ContentWrap class="h-1/1">-->
            <!--        <AreaTree @node-click="handleAreaNodeClick"/>-->
            <!--      </ContentWrap>-->
            <!--    </el-col>-->
            <el-col :span="24" :xs="24">
                <!-- 搜索工作栏 -->
                <el-card>
                    <el-form
                        :model="queryParams"
                        ref="queryFormRef"
                        :inline="true"
                        label-width="68px"
                    >
                        <el-form-item label="月份" prop="timestamp">
                            <el-date-picker
                                v-model="queryParams.timestamp"
                                type="month"
                                format="yyyy/MM"
                                value-format="timestamp"
                                placeholder="选择月份"
                            />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-row  style="padding: 10px">
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
                <el-row>
                    <!-- 基本信息 -->
                    <el-col :span="24" class="card-box" shadow="hover">
                        <el-card>
                            <el-descriptions title="基本信息" :column="6" border>
                                <el-descriptions-item label="电表名称" align="center">
                                    {{basicData.name}}
                                </el-descriptions-item>
                                <el-descriptions-item label="是否在线" align="center">
                                    <dict-tag :options="dict.type.biz_device_online" :value="basicData.online"/>
                                </el-descriptions-item>
                                <el-descriptions-item label="电表编号" align="center">
                                    {{basicData.sn}}
                                </el-descriptions-item>
                                <el-descriptions-item label="电费单价" align="center">
                                    {{basicData.unitPrice}}
                                </el-descriptions-item>
                                <el-descriptions-item label="创建时间" align="center">
                                    {{parseTime(basicData.createTime)}}
                                </el-descriptions-item>
                                <el-descriptions-item label="状态" align="center">
                                    <dict-tag :options="dict.type.biz_electricity_status" :value="basicData.status"/>
                                </el-descriptions-item>
                                <el-descriptions-item label="欠费停电" align="center">
                                    <dict-tag :options="dict.type.biz_owe_stop" :value="basicData.oweStop"/>
                                </el-descriptions-item>
                                <el-descriptions-item label="剩余电量" align="center">
                                    {{basicData.surplus}}
                                </el-descriptions-item>
                                <el-descriptions-item label="总电量" align="center">
                                    {{basicData.totalElectricity}}
                                </el-descriptions-item>
                                <el-descriptions-item label="型号" align="center">
                                    {{basicData.model}}
                                </el-descriptions-item>
                                <el-descriptions-item label="区域名称" align="center">
                                    {{basicData.areaName}}
                                </el-descriptions-item>
                                <el-descriptions-item label="抄表时间" align="center">
                                    {{parseTime(basicData.meterReadingTime)}}
                                </el-descriptions-item>
                            </el-descriptions>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 概览 -->
                <el-card style="margin-top: 20px">
                    <el-row type="flex" justify="space-around" style="text-align: center">
                        <el-col :span="4">
                            <el-card>
                                <div style="display: flex;flex-direction: column;">
                                    <div style="color:#b7b6b9;">起始电量</div>
                                    <div style="margin-top: 10px;color: #34bfa3;font-size: 18px;font-weight: 700;">{{data.startElectricity}}
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="4">
                            <el-card>
                                <div style="display: flex;flex-direction: column">
                                    <div style="color:#b7b6b9;">结束电量</div>
                                    <div style="margin-top: 10px;color: #34bfa3;font-size: 18px;font-weight: 700;">{{data.endElectricity}}
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="4">
                            <el-card>
                                <div style="display: flex;flex-direction: column">
                                    <div style="color:#b7b6b9;">用电量</div>
                                    <div style="margin-top: 10px;color: #34bfa3;font-size: 18px;font-weight: 700;">{{data.useElectricity}}
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="4">
                            <el-card>
                                <div style="display: flex;flex-direction: column">
                                    <div style="color:#b7b6b9;">单价</div>
                                    <div style="margin-top: 10px;color: #34bfa3;font-size: 18px;font-weight: 700;">{{data.unitPrice}}
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="4">
                            <el-card>
                                <div style="display: flex;flex-direction: column">
                                    <div style="color:#b7b6b9;">电费</div>
                                    <div style="margin-top: 10px;color: #34bfa3;font-size: 18px;font-weight: 700;">{{data.totalPrice}}
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-card>

                <!-- 表格 -->
                <el-card style="margin-top: 20px">
                    <el-table v-loading="loading" :data="data.details">
                        <el-table-column label="电表编号" align="center" prop="sn"/>
                        <el-table-column label="今日起始电量" align="center" prop="dayStartTotal"/>
                        <el-table-column label="总用电量" align="center" prop="totalElectricity"/>
                        <el-table-column label="今日用电量" align="center" prop="dayElectricity"/>
                        <el-table-column label="剩余电量" align="center" prop="surplus"/>
                        <el-table-column label="备注" align="center" prop="remark"/>
                        <el-table-column
                            label="创建时间"
                            align="center"
                            prop="createTime"
                            width="180">
                            <template slot-scope="scope">
                                {{parseTime(scope.row.createTime)}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <pagination
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.pageNo"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                    />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getElectricMeterDetail} from '@/api/equipment/electricity'
import { parseTime } from '../../../../utils/ruoyi'

export default {
    dicts: ['biz_electricity_status', 'biz_electricity_mode', 'biz_owe_stop', 'biz_device_online'],
    data(){
        return{
            loading:true,
            total:0,
            basicData:0,
            data:{
                startElectricity:0,
                endElectricity:0,
                useElectricity:0,
                unitPrice:0,
                totalPrice:0,
                details:[]
            },
            // 显示搜索条件
            showSearch: true,
            list:[],
            queryParams:{
                timestamp:new Date().getTime(),
                sn: ''
            },

        }
    },
    created() {
        console.log(this.$route.query.row)
        if(this.$route.query && this.$route.query.row){
            this.basicData = this.$route.query.row
            this.queryParams.sn = this.$route.query.row.sn
            this.getList()
        }
    },
    methods:{
       async getList(){
            this.loading = true
            try {
                const res = await getElectricMeterDetail(this.queryParams)
                this.data = res
            } finally {
                this.loading = false
            }
        },
        resetQuery(){
            this.$refs.queryFormRef.resetFields()
            this.handleQuery()
        },
        handleQuery(){
            this.queryParams.pageNo = 1
            this.getList()
        }
    }
}
</script>

<style scoped>
::v-deep .el-card.is-always-shadow {
    background-color: #f9f9f9;
}

</style>
